<template>
  <div>
    <!-- 卡片视图区 -->
    <el-card class="box-card">
      <!-- 面包屑导航区 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
        <el-breadcrumb-item>七牛云</el-breadcrumb-item>
      </el-breadcrumb>

      <el-upload
        class="upload-demo"
        action="http://121.196.185.217:8444/upload/img"
        :on-success="uploadSuccess"   
        accept=".jpg, .png"
        drag
        list-type="picture">
        <el-button type="primary">点击上传或拖拽上传</el-button>
        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
      </el-upload>

      <!-- 上传表格区 -->
      <el-table
        :header-cell-style="{textAlign: 'center'}"
        :cell-style="{ textAlign: 'center' }"
        :data="tableData"
        border
        style="width: 100%">
        <el-table-column
          prop="id"
          label="序号"
          width="180">
        </el-table-column>
        <el-table-column
          label="图片">
          <template slot-scope='scope'>
            <div class="demo-image__preview">
              <el-image 
                style="width: 150px"
                :src="scope.row.url" 
                :preview-src-list="srcList">
              </el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="url"
          width="600">
          <template slot-scope="scope">
            <el-button
              @click="handleCopy(scope.$index, scope.row)">
              {{scope.row.url}}
            </el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width='150'>
          <template slot-scope="scope">
            <el-button 
              type="danger" 
              icon="el-icon-delete" 
              size="mini" 
              @click="delMessage(scope.row.id)"></el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="queryInfo.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        background>
      </el-pagination>
    </el-card>
  </div>
</template>

<script>
export default {
  created() {
    this.getAllUrl()
  },
  data() {
    return {
      // 获取所有资源的查询参数
      queryInfo: {
        pageNum: 1,
        pageSize: 10,
        query: ""
      },
      tableData: [],
      total: 0,
      srcList: []
    }
  },
  methods: {
    async getAllUrl() {
      const { data: res } = await this.$http.post('upload/findAllImg', this.queryInfo)
      if (res.code != 'success') return this.$message.error('获取资源失败')
      this.tableData = res.data
      this.total = res.numbers
      res.data.forEach(item => this.srcList.push(item.url))
    },
    async delMessage(id) {
      const confirmResult = await this.$confirm('此操作将永久删除该资源, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).catch(err => err)
      if (confirmResult !== 'confirm') return this.$message.info('已取消删除')
      const { data: res } = await this.$http.post(`/upload/delete/${id}`)
      if (res !== 'success') return this.$message.error('删除资源失败')
      this.$message.success('删除资源成功')
      this.getAllMessage()
    },
    // 每页显示条数发生改变时
    handleSizeChange(size) {
      this.queryInfo.pageSize = size
      this.getAllUrl()
    },
    // 当前页码发生改变时
    handleCurrentChange(currentPage) {
      this.queryInfo.pageNum = currentPage
      this.getAllUrl()
    },
    // 上传成功后重新获取资源
    uploadSuccess() {
      this.getAllUrl()
    },
    // 七牛云点击复制
    handleCopy(index, row){
      this.copyData = row.url
      this.copy(this.copyData)
    },
    copy(data) {
      let url = data;
      let oInput = document.createElement('input');
      oInput.value = url;
      document.body.appendChild(oInput);
      oInput.select();
      // console.log(oInput.value)
      document.execCommand("Copy");
      this.$message.success('复制成功')
      oInput.remove()
    },
  }
}
</script>